<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- [css] rgba()和opacity这两个的透明效果有什么区别呢？ -->

  1.opacity 是属性，rgba()是函数，计算之后是个属性值；
2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；


隐藏元素可以从属性上进行隐藏，
display：none 通过定义自身的隐藏，并没有在页面存在dom节点，所以重新显示的时候，会导致页面重排。
visibility：hidden, 上面的不同，虽为隐藏，但在页面上还是有dom节点，个人认为比display：none较优。
opacity:1 透明度 给元素定义 隐藏、透明 是独立的透明属性,
transparent 透明颜色 是作为透明的颜色值使用，常见用在border隐藏做三角形,
rgba(0,0,0,1) 是颜色值的一种复合写法，既能显示颜色也能配合透明效果,
z-index=-1 定义层级属性若平常的页面显示为一，想看不到显示，可以把层级降低 用平常页面成为遮罩层，达到隐藏效果，换而言之，想突出一个元素也可把层级调大，类似于绝对定位的绝对效果。
, 还有一种是通过css3新增 用transform变化属性 rotate旋转 角度，也是可以达到隐藏效果，这里就涉及三维空间的思考。
</body>
</html>